<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta name="author" content="李祺丰,www.qifeng.site,mail:767521025@qq.com">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">  
    <title>css3非锚点跳转案例</title>  
    <link rel="stylesheet" href="./reset.css">  
    <link rel="stylesheet" href="test.css">  
</head>  
<body>  
    
    <div class="container">  
        <input class="tabCon" type="radio" name="tab" checked id="tab1">  
        <a class="tabCon" href="#tab1">a</a>  
        <input class="tabCon" type="radio" name="tab" id="tab2">  
        <a class="tabCon" href="#tab2">b</a>  
        <input class="tabCon" type="radio" name="tab" id="tab3">  
        <a class="tabCon" href="#tab3">c</a>  
        <input class="tabCon" type="radio" name="tab" id="tab4">  
        <a class="tabCon" href="#tab4">d</a>  
        <section class="floor f1">  
            <h1 class="text-center">这是第一屏</h1>  
        </section>  
        <section class="floor f2"><h1>这是第二屏</h1></section>  
        <section class="floor f3">这是第三屏</section>  
        <section class="floor f4">这是第四屏</section>  
    </div>  
</body>  
</html>